<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
<!--    搜索表单-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="品牌名字">
            <el-input v-model="formInline.brandName" ></el-input>
        </el-form-item>
        <el-form-item label="公司名字">
            <el-input v-model="formInline.companyName" ></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formInline.status" >
                <el-option label="禁用" value="2"></el-option>
                <el-option label="启用" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click=" selectByPageAndCondition">查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
    <el-button type="primary" plain @click="openDialog">新增</el-button>

<!--    新增对话框-->
    <el-dialog
            :title="diaTitle"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="myFormData" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="myFormData.brandName"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="myFormData.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="myFormData.ordered"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch
                        v-model="myFormData.status"
                        :active-value="1"
                        :inactive-value="2">
                </el-switch>
            </el-form-item>
            <el-form-item label="描述">
                <el-input type="textarea" v-model="myFormData.description"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <template>

<!--        table表格展示数据-->
        <el-table
                align="center"
                :data="tableData"
                :row-class-name="tableRowClassName"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    align="center"
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    align="center"
                    type="index"
                    width="100"
                    label="序号">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="brandName"
                    label="品牌名"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="companyName"
                    label="公司名"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="ordered"
                    label="序列号"
                    width="180">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="description"
                    label="描述"
                    width="180">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="状态" width="80">
                <template slot-scope="scope">
                    {{scope.row.status==1?'启用':'禁用'}}
                </template>
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
<!--    分页显示-->
    <div class="block">
        <span class="demonstration"></span>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>


<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: "#app",
        data: {
            total:'',
            pageSize:10,
            currentPage: 1,
            diaTitle:'新增',
            tableData:[],
            multipleSelection: [],
            dialogVisible:false,
            myFormData: {
                id:'',
                brandName: '',
                companyName:'',
                ordered:'',
                description:'',
                status:'',
            },
            formInline: {
                id:'',
                brandName: '',
                companyName:'',
                ordered:'',
                description:'',
                status:'',
            },
            ids:[],
        },
        methods: {
            handleClose(){
                this.form='';
                this.dialogVisible=false

            },
            //分页条件查询
            selectByPageAndCondition(){
                var _this=this
                console.log(this.formInline)
                axios({
                    method:'post',
                    url:'http://localhost:8088/w9/brand/selectByPageAndCondition?pageNum='+_this.currentPage+'&pageSize='+_this.pageSize,
                    data:_this.formInline
                }).then(resp=>{
                    this.pageSize=resp.data.pageSize
                    this.currentPage=resp.data.pageNum
                    this.total=resp.data.total
                    this.tableData=resp.data.list
                    console.log(resp.data)
                })
            },

            //分页查询
            selectByPage(){
                var _this=this
                axios({
                    method:'get',
                    url:'http://localhost:8088/w9/brand/selectByPage?pageNum='+_this.currentPage+'&pageSize='+_this.pageSize
                }).then(resp=>{
                    this.pageSize=resp.data.pageSize
                    this.currentPage=resp.data.pageNum
                    this.total=resp.data.total
                    this.tableData=resp.data.list
                    console.log(resp.data)
                })

            },
            //批量删除
            deleteByIds(){
                var _this=this
                console.log(this.multipleSelection);
                var ids=[];
                for (let i = 0; i <this.multipleSelection.length ; i++) {
                    ids[i]=this.multipleSelection[i].id
                }
                axios({
                    method:'post',
                    url:'http://localhost:8088/w9/brand/deleteByIds',
                    data:ids
                }).then(function (res) {
                    _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.$message({
                            showClose: true,
                            message: '批量删除成功',
                            type: 'success'
                        });
                        _this.selectByPage();
                    }).catch(() => {
                        _this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                })
            },
            //打开对话框，
            openDialog(){
                this.myFormData={};
                this.diaTitle='新增品牌'
                this.dialogVisible=true;


            },
            addBrand(){
                console.log("1111")
                location.href="/w9/addBrand.html"
            },
            //编辑品牌对象
            handleEdit(index, row) {
                this.diaTitle=row.brandName
                this.myFormData=row;
                this.dialogVisible=true;


            },
            //删除品牌
            handleDelete(index, row) {
                console.log(index, row);
                console.log(row.id)
                var _this=this
                axios({
                    method:'post',
                    url:'http://localhost:8088/w9/brand/deleteById',
                    data:row
                }).then(function (res){
                    _this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.$message({
                            showClose: true,
                            message: '删除'+res.data+'成功',
                            type: 'success'
                        });
                        _this.selectByPage();
                    }).catch(() => {
                        _this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });


                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex %2=== 0) {
                    return 'warning-row';
                } else {
                    return 'success-row';
                }

            },
            //保存或更新对象
            onSubmit(){
                var _this=this
                axios({
                    method: 'post',
                    url:'http://localhost:8088/w9/brand/addOrUpdate',
                    data:_this.myFormData
                }).then(function (res){
                    _this.dialogVisible=false
                    if(res.data=='updateSuccess'){
                        _this.$message({
                            showClose: true,
                            message: '更新成功',
                            type: 'success'
                        });
                    }
                    if(res.data=='saveSuccess'){
                        _this.$message({
                            showClose: true,
                            message: '新增成功',
                            type: 'success'
                        });
                    }

                    _this.selectByPage();


                })
            },
            //修改每页个数时调用此方法
            handleSizeChange(val) {

                var _this=this
                axios({
                    method:'get',
                    url:'http://localhost:8088/w9/brand/selectByPage?pageNum='+_this.currentPage+'&pageSize='+val
                }).then(resp=>{
                    this.pageSize=resp.data.pageSize
                    this.currentPage=resp.data.pageNum
                    this.total=resp.data.total
                    this.tableData=resp.data.list
                    console.log(resp.data)
                })
                console.log(`每页 ${val} 条`);
            },
            //修改当前页数时调用此方法
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            selectAll(){
                var _this=this
                axios({
                    method:'get',
                    url:'http://localhost:8088/w9/brand/selectAll',
                }).then(function (resp){
                    _this.tableData=resp.data
                    console.log(this.tableData)

                })
            },



        },
        mounted() {
          //  this.selectAll();
            this. selectByPage();
        }
    })
</script>
</body>
</html>